<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .header{height: 60px;background: rgba(0,255, 255, .6);position: fixed;width: 100%;z-index: 10;}
        .Nav{list-style:none; display: flex;align-items: center;justify-content: space-between;height: 100%;line-height: 60px;position: fixed;width: 100%;z-index: 10;}
        .Nav-List{display: block;padding: 0 30px;position: relative;}
        a{cursor: pointer;}
        a::after{content: '';display: block;width:4px;height: 4px;background-color: #f40;border-radius: 50%;position: absolute;bottom: 6px;left:calc(50% - 4px)}
        a:hover{color:#f40}
        .menu{height: 30px;width: 40px;position: absolute;right: 30px;top: 2px;border: 2px solid #000;cursor: pointer;display: none;}
        .menu-line{height: 1px;width: 30px;display: block;background-color: #000;position: absolute;}
        .menu-line:nth-child(1){top: 7px;left: 5px;}
        .menu-line:nth-child(2){top: 14px;left: 5px;}
        .menu-line:nth-child(3){top: 21px;left: 5px;}
        .Mask{position: fixed;z-index: 9;left: 0;top: 0;height: 100%;width: 100%;}

        /* 小屏幕适配 992px */
        @media(max-width: 992px) {
            .header{height: 40px;}
            .Nav{line-height: 40px;flex-direction: column;margin-top: 40px;height: 200px;display: none;}
            .Nav-List{width: 100%;text-align: center;background-color: rgba(245, 163, 174, .3);padding: 0;}
            a::after{display: none;}
            .menu{display: block;}
        }


    </style>
</head>
<body>
    
    <header class="header">
        <ul class="Nav">
            <li class="Nav-List"><a class="Nav-text">首页</a></li>
            <li class="Nav-List"><a class="Nav-text">案例</a></li>
            <li class="Nav-List"><a class="Nav-text">服务</a></li>
            <li class="Nav-List"><a class="Nav-text">关于我们</a></li>
            <li class="Nav-List"><a class="Nav-text">新闻资讯</a></li>
        </ul>

        <div class="menu">
            <i class="menu-line active"></i>
            <i class="menu-line active"></i>
            <i class="menu-line active"></i>
        </div>
    </header>

    <!-- 蒙版 -->
    <div class="Mask"></div>

    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./index.js"></script>




</body>
</html>